import { AILogsCon } from '@/services/models/dataDoc';
import { replaceN } from '@/utils/index';
import { nanoid } from 'nanoid';
import { useEffect } from 'react';
import { connect } from 'umi';
import Demo from '../frontBoot/Demo';
import DocExplain from '../frontBoot/DocExplain';
import Guide from '../frontBoot/Guide';
import LookTip from '../frontBoot/LookTip';
import General from '../generalCon';
const AgoCommandLogs: React.FC<any> = (props: any) => {
  const { agoLogs, setAgoLogs, structWrite, scrollToBottom, pollingReqState } = props;
  const { docCommonInfo, articles_expected, docList } = props.conversation;
  //添加查看示例
  const addDemo = () => {
    let isHasDemo = agoLogs.find((item: any) => item.type === 'demo1');
    //如果没有则添加
    if (!isHasDemo) {
      const example1 = {
        key: nanoid(),
        type: 'demo1',
        data: docCommonInfo.example_details,
      };
      const example2 = {
        key: nanoid(),
        type: 'demo2',
        data: docCommonInfo.example_details,
      };
      //加在lookTip之后
      const indexOfLookTip = agoLogs.findIndex((item: any) => item.type === 'lookTip');
      const updatedAgoLogs: any = [
        ...agoLogs.slice(0, indexOfLookTip + 1),
        example1,
        ...agoLogs.slice(indexOfLookTip + 1),
      ];
      setAgoLogs(updatedAgoLogs);

      setTimeout(() => {
        const updatedAgoLogs2 = updatedAgoLogs
          .map((item: any) => {
            if (item.type === 'demo1') {
              return [item, example2];
            }
            return item;
          })
          .flat();
        setAgoLogs(updatedAgoLogs2);
      }, 1000);
    }
  };
  //添加引导语
  const addGuide = () => {
    const { leading_details, example_details, click_status, key_points, user_input } =
      docCommonInfo;
    const list: any = [];
    if (agoLogs.length) return;
    if (leading_details) {
      let guide1: any = {
        key: nanoid(),
        type: 'guide1',
        data: leading_details,
      };
      let guide2: any = {
        key: nanoid(),
        type: 'guide2',
        data: leading_details,
      };
      let guide3: any = {
        key: nanoid(),
        type: 'guide3',
        data: leading_details,
      };
      const leading = {
        key: nanoid(),
        type: 'guide',
        data: leading_details,
      };
      list.push(leading);
      list.push(guide1);
      list.push(guide2);
      list.push(guide3);
    }
    if (example_details) {
      const lookTip = {
        key: nanoid(),
        type: 'lookTip',
      };
      list.push(lookTip);
    }
    if (click_status === 'clicked') {
      const example1 = {
        key: nanoid(),
        type: 'demo1',
        data: example_details,
      };
      const example2 = {
        key: nanoid(),
        type: 'demo2',
        data: example_details,
      };
      list.push(example1);
      list.push(example2);
    }
    //在文章生成页面 用户输入的内容
    if (user_input) {
      const userCommand = {
        key: nanoid(),
        type: 'userCommand',
        data: user_input,
      };
      const systemTip1 = {
        key: nanoid(),
        type: 'systemTip',
        data: '小麦正在根据您输入的文章提要内容，提炼出对应的信息',
      };
      const systemTip2 = {
        key: nanoid(),
        type: 'systemTip',
        data: '请确认关键信息是否准确，可以点击【编辑】修改',
      };
      list.push(userCommand);
      list.push(systemTip1);
      list.push(systemTip2);
    }
    // 要点提炼
    if (key_points) {
      const item_keyPoints: AILogsCon = {
        key: nanoid(),
        type: 'system',
        key_points: key_points,
        loading: false,
      };
      list.push(item_keyPoints);
    }
    setAgoLogs(list);
  };
  // 添加引导语 示例 用户输入 要点框
  useEffect(() => {
    if (docCommonInfo) {
      addGuide();
    }
  }, [docCommonInfo]);
  useEffect(() => {
    if (pollingReqState && pollingReqState.length > 0 && pollingReqState.includes('SUCCEED')) {
      //是否含有docExplain
      let isHas = agoLogs.findIndex((item: any) => item.type === 'docExplain');
      //如果有 则在agoLogs删掉旧的 再加入新的
      if (isHas > -1) {
        // 篇数提示
        if (articles_expected) {
          const systemTip3 = {
            key: nanoid(),
            type: 'systemTip',
            data: `小麦已成功为您重新生成了 ${articles_expected} 篇文章`,
          };
          setAgoLogs((prev: any) => [...prev, systemTip3]);
        }
      } else {
        // 篇数提示
        if (articles_expected) {
          const systemTip3 = {
            key: nanoid(),
            type: 'systemTip',
            data: `小麦已成功为您生成了 ${articles_expected} 篇文章`,
          };
          setAgoLogs((prev: any) => [...prev, systemTip3]);
        }
        let list = docList.map((item: any) => {
          return {
            id: nanoid(),
            writing_struct_name: item.writing_struct_name,
            writing_struct_intro: item.writing_struct_intro,
          };
        });
        // 行文结构说明
        const docExplain = {
          key: nanoid(),
          type: 'docExplain',
          data: list,
        };
        setAgoLogs((prev: any) => [...prev, docExplain]);
      }
    }
  }, [pollingReqState]);

  return (
    <>
      {/* 初始化从上个页面传来的引导语 查看示例 要点框 用户 */}
      {agoLogs.length > 0 &&
        agoLogs.map((item: AILogsCon) => {
          if (item.type === 'guide1' || item.type === 'guide2' || item.type === 'guide3') {
            return <Guide key={item.key} type={item.type} data={item.data}></Guide>;
          } else if (item.type === 'lookTip') {
            // 查看示例
            return <LookTip key={item.key} addDemo={addDemo}></LookTip>;
          } else if (item.type === 'demo1') {
            // 查看示例
            return (
              <Demo key={item.key} type={item.type} data={docCommonInfo.example_details}></Demo>
            );
          } else if (item.type === 'demo2') {
            // 查看示例
            return (
              <Demo key={item.key} type={item.type} data={docCommonInfo.example_details}></Demo>
            );
          } else if (item.type === 'userCommand') {
            return (
              <div className="commandList userCommand" key={item.key}>
                <div
                  className="commandList-bd"
                  dangerouslySetInnerHTML={{ __html: replaceN(item.data) }}
                ></div>
              </div>
            );
          } else if (item.type === 'systemTip') {
            return (
              <div className="commandList" key={item.key}>
                <div className="commandList-bd">{item.data}</div>
              </div>
            );
          } else if (item.type === 'system') {
            return (
              <div key={item.key} className="item-content" style={{ marginRight: 0 }}>
                <General
                  keyPoints={item.key_points}
                  loading={item.loading}
                  structWrite={structWrite}
                  agoLogs={agoLogs}
                  setAgoLogs={setAgoLogs}
                ></General>
              </div>
            );
          } else if (item.type === 'docExplain') {
            return (
              <DocExplain
                key={item.key}
                scrollToBottom={scrollToBottom}
                data={item.data}
                agoLogs={agoLogs}
                setAgoLogs={setAgoLogs}
              ></DocExplain>
            );
          } else if (item.type === 'docExplainIntro') {
            //行文结构说明点击效果
            return (
              <div key={item.key} className={`explainBox  ${item?.className}`}>
                {<div dangerouslySetInnerHTML={{ __html: item.data.writing_struct_intro }}></div>}
              </div>
            );
          } else {
            return <span key={item.key}></span>;
          }
        })}
    </>
  );
};
// export default AgoCommandLogs;
export default connect(({ conversation }) => ({ conversation }))(AgoCommandLogs);
